import React from 'react'
import { Modal, Button, Form, Input, Row, Col } from 'antd'

const FormItem = Form.Item
const Step = ({
                next,
                dispatch,
                user,
                form: {
                  getFieldDecorator,
                  validateFields,
                  setFieldsValue,
                }
              }) => {
  const onNext = () => {
    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'bindUser/stepUserNew',
          payload: values
        })
        // dispatch({
        //   type: 'role/query',
        //   payload: {limit: 30}
        // })
        // next()
      }
    })
  }

  return (
    <Form layout="horizontal">
      <Row>
        <Col span={10}>
          <FormItem>
          </FormItem>
        </Col>
      </Row>
      <Row type="flex" justify="center">
        <Col span={10}>
          <FormItem labelCol={{span: 7}}
                    wrapperCol={{span: 15}}
                    label="手机号或邮箱">
            {getFieldDecorator('keyword', {
              rules: [{required: true, message: '此项必须填写!'}, {whitespace: true}, {pattern: '^(\\w-*\\.*)+@(\\w-?)+(\\.\\w{2,})|(^1\\d{10})', message: '请输入手机号或邮箱！'}],
              initialValue: '',
            })(<Input placeholder="请输入手机号或邮箱"/>)}
          </FormItem>
        </Col>
      </Row>
      <Row type="flex" justify="space-around" gutter={8}>
        {<Col>
          <Button onClick={onNext}>下一步</Button>
        </Col>}
      </Row>
    </Form>
  )
}

export default Form.create()(Step)
